<%
/*
 布局一
 */
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%
    var data = { name: 'article' }
    %>
    <%- include('base/head', data) %>
    <link href="<%= locals.cdn('github-markdown-css/2.10.0/github-markdown.min.css') %>" rel="stylesheet">
    <link href="<%= locals.cdn('highlight.js/9.12.0/styles/atom-one-dark.min.css') %>" rel="stylesheet">
    <link href="<%= locals.cdn('social-share.js/1.0.16/css/share.min.css') %>" rel="stylesheet">
    <style>
        .markdown-body .highlight pre, .markdown-body pre {
            /* 针对 atom-one-dark*/
            background: #282c34;
        }

        .markdown-body {
            font-size: 1.2rem;
        }

        .markdown-body p > code {
            color: #e96900;
            padding: 3px 5px;
            border-radius: 0;
        }
    </style>
    <script src="<%= locals.cdn('social-share.js/1.0.16/js/social-share.min.js') %>"></script>
</head>
<body>
<%- include('loading', data); %>
<div id="app" class="article-a">
    <%
    var metas = post.metas
    var navData = { name: 'category' }
    var { category, postTag } = post.getCategoryOrTags()
    var post_date = dateFormat(post.post_date, 'YYYY-M-D')
    var categoryLabel = category.name
    var breadcrumbLabel
    if (SITE.defaultCategoryId == category.id) {
        breadcrumbLabel = dateFormat(post.post_date, 'YYYY年M月')
        navData.name = 'archives'
    } else {
        breadcrumbLabel = categoryLabel
    }
    var post_content = md.render(post.post_content)
    var author = post.user.user_nickname
    var guid = post.guid
    var commentDate = {
        id: guid,
        comment_author: '',
        comment_author_email: '',
        comment_author_url: '',
        comment_author_avatar: ''
    }
    %>
    <%- include('base/nav', navData); %>
    <div class="article__container container" style="    margin-top: 10rem;">
        <div class="ivu-breadcrumb">
                 <span>
                <a class="ivu-breadcrumb-item-link">首页</a>
                <span class="ivu-breadcrumb-item-separator">&gt;</span>
            </span>
            <span>
                <!--分类 默认分类显示归档日期-->
                <a class="ivu-breadcrumb-item-link"><%= breadcrumbLabel %></a>
                <span class="ivu-breadcrumb-item-separator">&gt;</span>
            </span>
            <span>
                <span class="ivu-breadcrumb-item-link">正文</span>
            </span>
        </div>
        <header class="article-a-header">
            <!--<span class="article-a-header__category"><%= categoryLabel %></span>-->
            <h1><%= post.post_title %></h1>
            <div class="article-a-header__info">
                <!--<span class="category">作者</span>-->
                <a class="name item j-logo--a">
                    <%= post.user.user_nickname %>
                </a>
                <!--<p class="meta" >-->
                <time class="publish-time item" datetime="<%= post_date %>"><%= post_date %> </time>
                <span class="wordage item">字数: <%= post.post_content.length %> </span>
                <span class="views-count item">阅读: 0 </span>
                <!--</p>-->
            </div>
        </header>
        <article class="inner markdown-body" ref="inner">
            <%- post_content %>
        </article>
        <section class="article-a-footer">
            <% if (postTag.length) { %>
                <div class="article-a-footer__tag">
                    <color-icon type="icon-color-tag" size="24" class="mr-2 align-middle"></color-icon>
                    <% postTag.forEach((tag) => { %>
                        <span class="ivu-tag ivu-tag-default ivu-tag-checked"><%= tag.name %></span>
                    <% }) %>
                </div>
            <% } %>
            <!--<div class="article-a-footer__thumbs"></div>-->
            <div class="article-a-footer__share social-share">
                <%
                var heartNum = metas.heart && metas.heart.meta_value || 0
                var heartEvent = `@click="heart($event,'${guid}', ${heartNum})"`
                var heartInnerText = ''
                if (cookies['heart_' + guid]) {
                    heartInnerText = '已&nbsp;&nbsp;赞&nbsp;&nbsp;|&nbsp;&nbsp;'
                } else {
                    heartInnerText = '<span ref="heartLabel">赞一个</span>&nbsp;&nbsp;|&nbsp;&nbsp;'
                }
                heartInnerText += `<span ref='heartNum'>${heartNum}</span>`
                %>
                <button class="thumbs__btn ivu-btn ivu-btn-circle ivu-btn-large ivu-btn-success" <%- heartEvent %>>
                    <color-icon class="mr-1 align-middle" size="18" type="icon-color-icon-"
                                ref="heartIcon"></color-icon>
                    <span style="font-size: 1rem"><%- heartInnerText %></span>
                </button>
            </div>
            <hr>
            <div class="article-a-footer__author">
                本文系作者
                <a target="_blank" title="<%= author %>">@<%= author %></a>
                原创文章, 转载请注明出处。<br>
                《<%= post.post_title %>》
                <a href="/article/<%= guid %>" title="<%= post.post_title %>"
                   class="am-text-secondary">http://www.mbdoge.cn/article/<%= guid %></a>
                <!-- 、作者和<a href="/p/<%= guid %>" title="<%= post.post_title %>" class="am-text-secondary">本文链接</a> -->
                <!-- 文章分类 相关推荐 -->
            </div>
        </section>
        <input style="position: fixed;left: -999px;opacity: 0;pointer-events: none" ref="copyrelay"/>
        <%- include('template/comment', commentDate); %>
    </div>
    <%- include('base/bottom', data); %>
</div>
<%- include('base/footer', data); %>
</body>
</html>
